import { defineComponent, ref, onBeforeMount } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from "pinia"; //引入pinia转换
import axios from "axios";
import useUserStore from '@/stores/userStore';
const userStore = useUserStore();
let {userName,userRole,isLogin} = storeToRefs(userStore);

import './style.less';
import { ElButton, ElMessage } from "element-plus";

interface Props {
  title: string,
  locate: string,
  temperature: string,
  isBack: boolean
}

export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    locate: {
      type: String,
      default: ''
    },
    temperature: {
      type: String,
      default: '10℃'
    },
    isBack: {
      type: Boolean,
      default: false
    }
  },
  setup(props: Props) {

    const router = useRouter();
    const route = useRoute();

    const activeMenu = ref('');

    onBeforeMount(() => {
      activeMenu.value = route.name as string;
    })

    const logout = () => {
      axios.post("http://localhost:8080/logout",null,{
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(()=>{

      })
      userName.value = "";
      userRole.value = ""
      isLogin.value = false;
      router.push({ path: '/Login' });
    }

    const renderMenu = (list: any) => {
      return list.map((item: any) => {
        return (
          <div
            onClick={() => {
              if (!item.name) return;
              activeMenu.value = item.name;
              localStorage.setItem('active_menu', item.name)
              router.push({ name: item.name })
            }}
            class={`menu-item ${activeMenu.value === item.name ? 'menu-item_active' : ''}`}
          >
            <span>{item.title}</span>
          </div>
        )
      })
    }

    return () => (
      <div class="top-bar">
        <div class="left">
          {
            renderMenu([
              { title: "返回主页", name: "Home" },
              // { title: "备用页面1", name: "ArtificialIntelligence" },
              { title: "日志数据可视化", name: "AchievementAggregation" }
            ])
          }
        </div>
        <div class="center">
          {/* <img
            src={new URL(`../../assets/common/main-title.png`, import.meta.url).href} alt=""
            style={{
              width: '1000px',
              transform: 'translate(15px, 0px)'
            }}
          /> */}
          <span style="letter-spacing: 4px;">{props.title}</span>
          <div class="logout" onClick={logout}></div>
      </div>
    <div class="right">
      {
        renderMenu([
          { title: "流量数据可视化", name: "BusinessIntegration" },
          // { title: "备用页面2", name: 'VillageLevel'},
              {title: '综合数据可视化', name: 'OperationalRegulation'}
            ])
          }
        </div>
      </div>
    )
  }
});
